<!-- 项目动态 -->
<template>
  	<div class="main">
		<div class="head pt32 pb32">
			<div class="back-title ft14">
				<div class="back pr32 align-row-center pointer" @click="$router.back(-1)">
                    <i class="icon ic_back mr8"></i>
                    <span>返回</span>
                </div>
				<div class="fc-black">{{ projectInfo.shortName }}>{{ type == '1' ? '项目经理总结' : '动态'}}</div>
			</div>
		</div>
        <div class="add-dynamic pb24" v-if="isManager && type == 1">
            <div class="align-row-center pointer" @click="openAddSummary">
                <i class="icon add_new-job mr8"></i>
                <span class="fc-gray ft14">追加总结</span>
            </div>
        </div>
		<div class="content pb24 scrollbar-y">
            <div class="list-dynamic ">
                <div class="item mr24 mb24 pt24 pr48 pb24 pl24" v-for="(item,index) in dataList" :key="index">
                    <div class="item-head">
                        <img :src="serverIp.setImgUrl(item.createUserHeadImage)"/>
                    </div>
                    <div class="item-content">
                        <p class="pt2 pb2 ft14 fc-black " v-text="item.createUserName"></p>
                        <div class="pt24 pb24 align-row-center ft12 fc-gray">
                            <div class="align-row-center pr32">
                                <i class="icon ic_fill mr8 "></i>
                                <span v-text="item.projectName"></span>
                            </div>
                            <div class="align-row-center" v-if="type == 1">
                                <i class="icon ic_schedule mr8"></i>
                                <span class="mr16">项目进度：{{ item.progressProportion || 0}}%</span>
                                <i class="icon mr8" :class="item.upDown > 0 ? 'ic_up' : (item.upDown < 0 ? 'ic_down' : 'ic_flat')"></i>
                                <span class="ft12" :class="item.upDown > 0 ? 'fc-blue' : (item.upDown < 0 ? 'fc-orange' : 'fc-gray')">{{ item.upDown }}%</span>
                            </div>
                            <div class="align-row-center" v-else>
                                <i class="icon ic_flag-fill mr8"></i>
                                <span class="mr16">{{ item.managerReport == true ? '项目经理一周总结' : item.planName }}</span>
                            </div>
                        </div>
                        <p class="content-text ft14 lh24 ellipsis2" :title="item.content" v-text="item.content"></p>
                        <div class="pt16 space-between">
                            <p class="fc-gray">{{ !!item.addTime == true ? new Date(item.addTime).Format('yy/MM/dd hh:mm:ss') :'' }}</p>
                            <div class="flex flex-space-between">
                                <i class="icon ic_edit mr32 pointer" v-if="type == 1 && index == 0 && isManager == true && new Date().getTime() < (1000 * 60 * 60 * 24) + (item.addTime * 1)" @click="openEditSummary(item)"></i>
                                <i class="icon ic_delete-fill pointer" v-if="type == 1 && index == 0 && isManager == true && new Date().getTime() < (1000 * 60 * 60 * 24) + (item.addTime * 1)" @click="deleteSummary(item.id)"></i>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
		</div>
        <transition name="fade">
            <div class="main-popup"  v-if="is_show_setSummary">
                <set-summary @close="closeModal" @callback="setSummaryCallback" :data="addOrEditData" />
            </div>
        </transition>
        <transition name="fade">
            <div class="main-popup"  v-if="is_show_deleteSummary">
                <message-box @close="closeModal" @callback="deleteSummaryCallback" :indexClose="'is_show_deleteSummary'" :content="'动态删除后不可再恢复，请确认是否要删除该动态？'"></message-box>
            </div>
        </transition>
  	</div>
    
</template>

<script>
import setSummary from '@/components/projectInfo/setSummary'; //设置项目总结
import messageBox from '@/components/base/messageBox'; //消息弹窗
export default {
    components: {
        setSummary,
        messageBox
    },
	data () {
		return {
            is_show_setSummary:false, 
            is_show_deleteSummary:false,
            deleteId:'',
            projectId:'',
            type:'',
            addOrEditData:{},
            projectInfo:{},
            dataList:[],
            isManager:false, //是否是项目经理
		};
	},
	computed: {},
	created(){
        this.projectId = this.$route.query.projectId;
        this.type = this.$route.query.type;
    },
	mounted(){
        this.getProjectInfo();
        this.getDataList();
    },
	methods: {
        closeModal(res){
            this[res] = false;
        },
        openAddSummary(){
            this.is_show_setSummary = true;
            this.addOrEditData = {
                projectId:this.projectId,
                projectName:this.projectInfo.shortName,
                currentProgress:this.projectInfo.progressProportion
            };
        },
        openEditSummary(item){
            this.is_show_setSummary = true;
            this.addOrEditData = {
                projectId:this.projectId,
                dynamicId:item.id,
                content:item.content,
                progressProportion:item.progressProportion,
                warning:item.warning,
                projectName:this.projectInfo.shortName,
                currentProgress:item.progressProportion,
            };
        },
        deleteSummary(id){
            this.deleteId = id;
            this.is_show_deleteSummary = true;
        },
        deleteSummaryCallback(res,indexClose){
            var json = {
                dynamicId:this.deleteId
            }
            this.$http.post("/plan/dynamic/delete",json).then(res =>{
                if(res.statusCode == 200){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.closeModal(indexClose);
                    this.getDataList();
                }
            }).catch(err =>{
                console.log(err)
            })
        },
        getProjectInfo(){
            var json = {
                projectId:this.projectId,
                userId:this.$store.state.userInfo.userId
            }
            this.$http.post("/project/project/info",json).then(res =>{
                if(res.statusCode == 200){
                    this.projectInfo = res.data;
                    if(this.projectInfo.managerId == this.$store.state.userInfo.userId){
                        this.isManager = true;
                    }
                }
                console.log(res,"res")
            }).catch(err =>{
                console.log(err)
            })
        },
        //获取动态
        getDataList(){
            var json = {
                companyId: this.$store.state.userInfo.companyId,
                // createUserId:this.$store.state.userInfo.userId,
                projectId: this.projectId,
                pageNum:1,
                pageSize:9999
            }
            if(this.type == '1'){
                json.managerReport = true; //查项目经理总结
            }
            this.$http.get('/plan/dynamic/list', {
                params: json
            }).then(res => {
                if(res.statusCode == 200){
                    this.dataList = (res.data && res.data.list ) || []
                }else{
                    this.dataList = [];
                }
                console.log(this.dataList,"eeeeee");
            }).catch( error => {
                console.log(error);
            });
        },
        setSummaryCallback(){
            this.is_show_setSummary = false;
            this.addOrEditData = {};
            this.$message({
                message: '保存成功',
                type: 'success'
            });
            this.getProjectInfo();
            this.getDataList();
        }
    }
}

</script>
<style lang='scss' scoped>
	.main{
		height:100%;
		// overflow:hidden;
		display:flex;
		flex-direction:column;
		>.head{
			display:flex;
			justify-content:space-between;
			align-items:center;
			.back-title{
				display:flex;
				align-items:center;
				.back{
					color: #96a2aa;
				}
			}
		}
		>.content{
            // flex:1;
            height:calc(100% - 120px);
			display:flex;
            flex-wrap:wrap;
            >.list-dynamic{
                min-width:510px;
                width:100%;
                height:100%;
                display:flex;
                flex-wrap:wrap;
                align-content:flex-start;
                // justify-content: center;
                overflow-y:auto;
                &::-webkit-scrollbar {
                    display: none
                }
                -ms-overflow-style: none; /* IE 10+ */
                scrollbar-width: none; /* Firefox */
                >.item{
                    width: 480px;
                    height: 202px;
                    background-color: #ffffff;
                    box-shadow: 0px 0px 20px 0px 
                        rgba(10, 82, 228, 0.06);
                    border-radius: 6px;
                    display:flex;
                    .item-head{
                        width:48px;
                        height:48px;
                        margin-right:24px;
                        >img{
                            border-radius: 6px;
                            width:100%;
                            height:100%;
                        }
                    }
                    .item-content{
                        width:calc(100% - 72px);
                        .content-text{
                            height:48px;
                        }
                    }
                }
            }
        }
        .ic_flag-fill{
            width: 11px;
            height: 13px;
            background-image: url("~@/assets/img/project/info/ic_flag-fill.png");
        }
        .add_new-job{
            width: 12px;
            height: 12px;
            background-image: url("~@/assets/img/project/add_new-job.png");
        }
        .ic_delete-fill{
            width: 14px;
            height: 14px;
            background-image: url("~@/assets/img/project/dynamic/ic_delete-fill.png");
        }
        .ic_down{
            width: 5px;
            height: 14px;
            background-image: url("~@/assets/img/project/dynamic/ic_down.png");
        }
        .ic_edit{
            width: 14px;
            height: 14px;
            background-image: url("~@/assets/img/project/dynamic/ic_edit.png");
        }
        .ic_fill{
            width: 12px;
            height: 12px;
            background-image: url("~@/assets/img/project/dynamic/ic_fill.png");
        }
        .ic_flat{
            width: 6px;
            height: 1px;
            background-image: url("~@/assets/img/project/dynamic/ic_flat.png");
        }
        .ic_schedule{
            width: 12px;
            height: 12px;
            background-image: url("~@/assets/img/project/dynamic/ic_schedule.png");
        }
        .ic_up{
            width: 5px;
            height: 14px;
            background-image: url("~@/assets/img/project/dynamic/ic_up.png");
        }
	}
</style>